<template>
  <div class="SubPanel" v-show="isOpen">
    <div class="title-bar">
      <button @click="close"><i class="el-icon-arrow-left"></i></button>
      {{title}}
    </div>
    <slot/>
  </div>
</template>

<script>
import bus from 'src/store/eventBus'
export default {
  name: 'SubPanel',
  data () {
    return {
      isOpen: false
    }
  },
  props: {
    title: String
  },
  methods: {
    open () {
      this.isOpen = true
      this.$emit('subPanelOpen')
    },
    close () {
      this.isOpen = false
      this.$emit('subPanelClose')
    },
    renderWebchatContainer () {
      this.close()
    }
  },
  beforeMount () {
    bus.$on('renderWebchatContainer', this.renderWebchatContainer)
  },
  beforeDestroy () {
    bus.$off('renderWebchatContainer', this.renderWebchatContainer)
  }
}
</script>

<style lang="stylus" scoped>
  .SubPanel
    position absolute
    top 0
    bottom 0
    left 0
    right 0
    background #ffffff
    z-index 10
  .title-bar
    position relative
    height 40px
    line-height 40px
    text-align center
    font-size:14px;
    color #333333
    border-bottom 1px solid #D9D9D9
    button
      position absolute
      width: 22px;
      left 0px
      height 40px
      border none
      padding: 0;
      background transparent
      text-align center
      font-size 14px
      color #A6A6A6
      cursor pointer
      :hover
        color #333333
</style>
